import { _decorator, Component, Node, Button, Vec3, v3 } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { DevConfig, ItemKey, ItemParam } from '../../../../scripts/managers/DevConfig';
import { Label } from 'cc';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { thinking_sdk_m } from '../../../../scripts/managers/SDK/ThinkingCocosSDKManager';
import { ShopPanel } from '../ShopPanel/ShopPanel';
import { gm } from '../../../../scripts/managers/GameManager';
import { i18n } from '../../../../scripts/i18n';
import { SpriteFrame } from 'cc';
import { Sprite } from 'cc';
import { lm } from '../../LobbyManager';
import { forkJoin, Observable } from 'rxjs';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('BuyItemPanel')
export class BuyItemPanel extends BasePanel {

    itemKey = ReactiveProperty.Create<ItemKey>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Button)
    buyButton: Button = null;

    @property(Label)
    buyButtonLabel: Label = null;

    @property(Button)
    closeButton: Button = null;

    // @property(Label)
    // contentLabel: Label = null;

    @property(SpriteFrame)
    imgSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    imgSprite: Sprite = null;

    private typeData = {
        'swapper': 0,
        'magnet': 1,
        'balloon': 2
    }


    willBind(): void {
        // this.adaptive();
        this.mainNode.setScale(.5, .5, .5);
    }

    useObserves() {
        return [
            this.itemKey.subscribe(this.refresh.bind(this)),
            BindButton(this.buyButton).subscribe(this.buyButtonClicked.bind(this)),
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this)),
        ];
    }

    // adaptive() {
    //     this.mainNode.setScale(v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale()));
    // }
    openPanelAnim(): Observable<any> {
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }

    refresh() {
        if (this.itemKey.value == null) return;
        let param = DevConfig.ITEM_PARAM[this.itemKey.value] as ItemParam;
        // this.contentLabel.string = `${i18n.t(`item.${this.itemKey.value}.name`)} x1`;
        // this.buyButtonLabel.string = `(Coin:${param.cost_coin}) Buy`;
        this.buyButtonLabel.string = `${param.cost_coin}`;
        this.imgSprite.spriteFrame = this.imgSpriteFrame[this.typeData[this.itemKey.value]]
    }

    buyButtonClicked() {
        if (this.itemKey.value == null) return;
        let param = DevConfig.ITEM_PARAM[this.itemKey.value];
        if (udm.coin.value < param.cost_coin) {
            thinking_sdk_m.requestTrack('Shoping_Open', {
                OpenType: 'NoGold',
                OpenWay: 'Battle',
                IsNew: udm.isNew.value,
                Level_ID: udm.stageNum.value,
            });
            ShopPanel.StartProcess().subscribe();
            // BuyItemPanel.CloseProcess(null, 'close');
            return;
        }


        udm.coin.value -= param.cost_coin;
        udm.getItemRx(this.itemKey.value).value += 1;
        udm.save();
        gm.coinUse.value += param.cost_coin;

        thinking_sdk_m.requestTrack('Item_Get', {
            ItemType: this.itemKey.value,
            CType: 'Gold',
            UseType: 'Num',
            ItemNum: 1,
            ItemAll: udm.getItemRx(this.itemKey.value).value,
            Level_ID: udm.stageNum.value,
            IsNew: udm.isNew.value,
            Booster_Itemdetail: `Swapper:${udm.itemSwapper.value}|Magnet:${udm.itemMagnet.value}|Balloon:${udm.itemBalloon.value}`
        });

        thinking_sdk_m.requestTrack('Coins_Use', {
            CoinNum: param.cost_coin,
            Type: this.itemKey.value,
            IsNew: udm.isNew.value,
            Level_ID: udm.stageNum.value,
        });


        BuyItemPanel.CloseProcess(null, 'got');
    }

    closeButtonClicked() {
        BuyItemPanel.CloseProcess(null, 'close');
    }
}

